<script>
import moment from "moment";
export default {
  props: {
    order: Object,
    is_selected: Boolean,
  },
  computed: {
    created_at() {
      return moment(this.order.created_at).format("YYYY-MM-DD HH:mm:SS");
    },
    bodyStyle() {
      return this.is_selected
        ? {
            backgroundColor: "#cccccc",
          }
        : {};
    },
  },
  methods: {
    onSelect() {
      this.$emit("on-select", this.order);
    },
  },
};
</script>
<template>
  <div class="order-row" :style="bodyStyle">
    <!-- 店铺信息 -->
    <div class="flex-between" style="align-content: flex-start">
      <div style="flex: 1" @click="onSelect">
        <div style="font-size: 16px; font-weight: bold">
          {{ order.vip_remark }} ({{ order.vip_phone }})
        </div>
        <div style="font-size: 12px; color: #000000; margin-top: 5px">
          下单时间: {{ created_at }}
        </div>
        <div style="font-size: 12px; color: #000000; margin-top: 5px">
          拿货数量: {{ order.items_count }}件
        </div>
        <div style="font-size: 12px; color: #000000; margin-top: 5px">
          拿货总额: {{ order.total_amount }}件
        </div>
      </div>

      <div>
        <div>
          <el-tag
            size="large"
            effect="dark"
            :type="order.pick_at ? 'success' : 'info'"
            disable-transitions
            style="margin-left: 40px; font-size: 12px"
          >
            {{ order.pick_at ? "已拣货" : "未拣货" }}
          </el-tag>
        </div>
        <div>
          <el-tag
            size="large"
            :type="order.paid_at ? 'success' : 'info'"
            effect="dark"
            disable-transitions
            style="margin-left: 40px; font-size: 12px; margin-top: 10px"
          >
            {{ order.paid_at ? "已支付" : "未付款" }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.order-row {
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 12px;
  border: 1px solid #aaaaaa;
}
</style>
